<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-group-carousel">
      <input-normal label="修改组件类型" v-model="componentData.cid"  @change="onChangeAttrType"></input-normal>
      <dropdown-normal label="列表类型" :valLists="LIST_TYPE" v-model="commonAttr.listType" @change="onChangeAttr"></dropdown-normal>
      <dropdown-normal label="列数" v-if="commonAttr.listType == LIST_TYPE_MAP.commonList" :valLists="COLUMN_NUM" v-model="commonAttr.columnNum" @change="onChangeAttr"></dropdown-normal>
      <input-normal v-if="commonAttr.listType != LIST_TYPE_MAP.carousel" label="单项的高度" v-model="commonAttr.height" @change="onChangeAttr"></input-normal>
      <switch-normal v-model="commonAttr.isFullScreen" label="全屏" @change="onChangeAttr"></switch-normal>
      <input-normal label="列表长度" v-model="commonAttr.listLen" @change="onChangeAttr"></input-normal>
      <template v-if="commonAttr.listType == LIST_TYPE_MAP.relative">
        <input-normal label="改变高度组件id" v-model="commonAttr.heightCompId" @change="onChangeAttr"></input-normal>
      </template>
      <template v-if="commonAttr.listType == LIST_TYPE_MAP.carousel">
        <dropdown-normal v-model="commonAttr.paginationType" :valLists="PAGINATION_TYPE" label="分页器类型" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
        <dropdown-normal v-if="commonAttr.paginationType == PAGINATION_TYPE_MAP.dot || commonAttr.paginationType == PAGINATION_TYPE_MAP.dotAndBtns" label="分页器颜色" :valLists="CAROUSEL_COLOR_TYPES" v-model="commonAttr.paginationColorType" @change="onChangeAttr"></dropdown-normal>
        <div v-if="commonAttr.paginationType == PAGINATION_TYPE_MAP.btns || commonAttr.paginationType == PAGINATION_TYPE_MAP.dotAndBtns">
          <p class="margin-left-right-16">翻页左按钮</p>
          <add-img-con :url="commonAttr.preBtnUrl" comAttr="commonAttr" picAttr="preBtnUrl" :height="100" :isCrop="false" class="margin-left-right-16"></add-img-con>
          <p class="margin-left-right-16">翻页右按钮</p>
          <add-img-con :url="commonAttr.nextBtnUrl" comAttr="commonAttr" picAttr="nextBtnUrl" :height="100" :isCrop="false" class="margin-left-right-16"></add-img-con>   
          <input-normal label="翻页按钮宽度" v-model="commonAttr.swiperBtnWidth" @change="onChangeAttr"></input-normal>
          <input-normal label="翻页按钮高度" v-model="commonAttr.swiperBtnHeight" @change="onChangeAttr"></input-normal>
        </div>
        <dropdown-normal v-model="commonAttr.carouselType" :valLists="CAROUSEL_TYPES" label="轮播类型" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
        <div v-if="commonAttr.carouselType == CAROUSEL_TYPES_MAP.slidesPerView">
          <input-normal label="显示多少个滑块" v-model="commonAttr.slideNum" @change="onChangeAttr"></input-normal>
          <slider-normal v-model="commonAttr.slideSpace" label="滑块间距" :max="100" :step="2" @change="onChangeAttr"></slider-normal>
        </div>
        <input-normal label="初始化显示索引" v-model="commonAttr.initialSlide" @change="onChangeAttr"></input-normal>
        <switch-normal v-model="commonAttr.isLoop" label="循环播放" @change="onChangeAttr"></switch-normal>
        <switch-normal v-model="commonAttr.autoTurnPage" label="自动翻页" @change="onChangeAttr"></switch-normal>
        <slider-normal v-if="commonAttr.autoTurnPage" v-model="commonAttr.turnPageTime" :min="0" :max="10" :step="1" label="翻页时间" @change="onChangeAttr"></slider-normal>
      </template>
    </el-form>
  </right-template>
</template>

<script setup lang="ts">
import { useWebComponentStore } from '@/store/web/component'
import { PAGINATION_TYPE, PAGINATION_TYPE_MAP, CAROUSEL_TYPES, CAROUSEL_TYPES_MAP, CAROUSEL_COLOR_TYPES, LIST_TYPE, LIST_TYPE_MAP, COLUMN_NUM, COMPONENT_TYPES } from '@/const/'
import { ComponentTypesDefaultDom  } from '@/store/models/component-default-data'

const useWebComponent = useWebComponentStore()

let componentData_: any
const componentData = computed(() => {
  componentData_ = useWebComponent.currentComponentData
  return componentData_
})
let commonAttr_: any
const commonAttr = computed(() => {
  commonAttr_ = useWebComponent.currentComponentData!.commonAttr
  return commonAttr_
})
const onChangeAttr = () => {
  // useWebComponent.updateCurrentComponentData({ commonAttr: commonAttr_ })
}
const onChangeAttrType = () => {
  let newobj: any
  if(componentData_.cid == COMPONENT_TYPES.group_component) {
    newobj = _.cloneDeep(ComponentTypesDefaultDom[COMPONENT_TYPES.group_component])
  } else {
    newobj = _.cloneDeep(ComponentTypesDefaultDom[COMPONENT_TYPES.group_carousel])
  }
  newobj.id = componentData_.id
  newobj.conAttr = componentData_.conAttr
  newobj.components = componentData_.components
  newobj.animate = componentData_.animate
  newobj.active = componentData_.active
  useWebComponent.replaceCurrentComponentData(newobj)
}
</script>